<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: orangered;
        transition: all 1s;
        transition: border-radius .5s ease-in-out 0s;
      }

      /* 
	    [] 表示这个值，可以省略不写
	    css属性名  过渡时间   时间函数  延迟时间 
        */

        /* transition: transition-property transition-duration [transition-timing-function] [transition-delay]; */
        /* 属性	描述
        transition-property	指定 CSS 属性的 name，哪些属性要过渡
        transition-duration	transition 效果需要指定多少秒或毫秒才能完成，动画时间
        transition-timing-function	指定 transition 效果的速度变化曲线
        transition-delay	定义 transition 效果开始的时候（延迟时间） */

        /* 
        ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
        linear - 规定从开始到结束具有相同速度的过渡效果
        ease-in -规定缓慢开始的过渡效果
        ease-out - 规定缓慢结束的过渡效果
        ease-in-out - 规定开始和结束较慢的过渡效果
        cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值 */
      .box:hover {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
